<template>
  <div class="flex" style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 24px;">

    <p :class="type?'webfont-Medium title-'+type:'title webfont-Medium'">{{ title }}
      <el-button v-if="title === '数据概览'" type="success" style="margin-left: 10px;" @click="createGround">创建广告</el-button>
      <slot name="sec"></slot>
    </p>
    <div>
      <slot />
    </div>

  </div>
</template>

<script>
export default {
  props: {
    title: {
      default: '卡片',
      type: String
    },
    type: {
      default: undefined,
      type: Number || String
    }

  },
  methods:{
    createGround(){
      this.$router.push({
        path: '/ad/create/create-series',
        query:{
          type:'common'
        }
      })
    }
  }
}
</script>

<style scoped="true" lang="scss">
  @import '~@/styles/variables.scss';

  .title {
    /* 默认标题 */
    font-size: 16px;
  }

  .title-1 {
    /* 一级标题*/
    font-size: 20px;
    text-indent: 18px;
    position: relative;
    &::after {
      display: inline-block;
      content: '1';
      width: 8px;
      height: 24px;
      position: absolute;
      top: 50%;
      left: 0px;
      transform: translateY(-50%);
      font-size: 0;
      background-color: $mainColor1;
    }

  }
</style>
